<template>
  <footer class="app-footer">
    <div class="footer-content">
      <!-- 主要内容 -->
      <div class="footer-main">
        <!-- 关于我们 -->
        <div class="footer-column">
          <h3 class="footer-title">关于 GovernTalk</h3>
          <p class="footer-description">
            GovernTalk 是您的公务员考试学习交流平台，致力于提供高质量的学习资源和交流社区，助力考生成功上岸。
          </p>
          <div class="footer-buttons">
            <Button type="primary" size="small">立即加入</Button>
            <Button size="small">了解更多</Button>
          </div>
        </div>

        <!-- 快速链接 -->
        <div class="footer-column">
          <h3 class="footer-title">快速链接</h3>
          <ul class="footer-links">
            <li><a href="#" class="footer-link">论坛首页</a></li>
            <li><a href="#" class="footer-link">学习资源</a></li>
            <li><a href="#" class="footer-link">学习小组</a></li>
            <li><a href="#" class="footer-link">题目库</a></li>
            <li><a href="#" class="footer-link">考试日历</a></li>
            <li><a href="#" class="footer-link">经验分享</a></li>
          </ul>
        </div>

        <!-- 联系方式 -->
        <div class="footer-column">
          <h3 class="footer-title">联系我们</h3>
          <ul class="footer-contacts">
            <li class="contact-item">
              <el-icon class="contact-icon"><Message /></el-icon>
              <span class="contact-text">support@governtalk.com</span>
            </li>
            <li class="contact-item">
              <el-icon class="contact-icon"><Phone /></el-icon>
              <span class="contact-text">400-123-4567</span>
            </li>
            <li class="contact-item">
              <el-icon class="contact-icon"><MapLocation /></el-icon>
              <span class="contact-text">北京市海淀区中关村大街1号</span>
            </li>
          </ul>
        </div>

        <!-- 关注我们 -->
        <div class="footer-column">
          <h3 class="footer-title">关注我们</h3>
          <div class="social-icons">
            <a href="#" class="social-icon">
              <el-icon class="social-icon-inner"><Message as Weixin /></el-icon>
            </a>
            <a href="#" class="social-icon">
              <el-icon class="social-icon-inner"><Message as Weibo /></el-icon>
            </a>
            <a href="#" class="social-icon">
              <el-icon class="social-icon-inner"><Document as Github /></el-icon>
            </a>
          </div>
          <div class="qr-code">
            <img src="https://picsum.photos/id/1025/120/120" alt="官方公众号" class="qr-code-img">
            <p class="qr-code-text">官方公众号</p>
          </div>
        </div>
      </div>

      <!-- 底部版权信息 -->
      <div class="footer-bottom">
        <div class="footer-links-bottom">
          <a href="#" class="footer-link-bottom">隐私政策</a>
          <span class="footer-separator">|</span>
          <a href="#" class="footer-link-bottom">用户协议</a>
          <span class="footer-separator">|</span>
          <a href="#" class="footer-link-bottom">版权声明</a>
          <span class="footer-separator">|</span>
          <a href="#" class="footer-link-bottom">常见问题</a>
        </div>
        <p class="footer-copyright">
          © 2024 GovernTalk 公考论坛. All rights reserved.
        </p>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
    <el-button
      v-if="showBackToTop"
      class="back-to-top"
      icon="el-icon-arrow-up"
      circle
      size="small"
      @click="backToTop"
    />
  </footer>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import Button from './Button.vue';
import { Message, Phone, MapLocation } from '@element-plus/icons-vue';

// 回到顶部相关
const showBackToTop = ref(false);

const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300;
};

const backToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="scss" scoped>
.app-footer {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 0 20px;
  color: var(--text-primary);
  position: relative;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .footer-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .footer-column {
    &:first-child .footer-description {
      margin-bottom: 20px;
    }
  }

  .footer-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 3px;
      background: var(--primary-color);
      border-radius: 3px;
    }
  }

  .footer-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
  }

  .footer-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-link {
    display: block;
    padding: 8px 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;

    &:hover {
      color: var(--primary-color);
      transform: translateX(5px);
    }
  }

  .footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .contact-icon {
    color: var(--primary-color);
  }

  .social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }

  .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--primary-color);
    transition: all 0.3s ease;

    &:hover {
      background-color: var(--primary-color);
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
    }
  }

  .social-icon-inner {
    font-size: 18px;
  }

  .qr-code {
    text-align: center;
  }

  .qr-code-img {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .qr-code-text {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-links-bottom {
    margin-bottom: 15px;
  }

  .footer-link-bottom {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;

    &:hover {
      color: var(--primary-color);
    }
  }

  .footer-separator {
    margin: 0 10px;
    color: var(--border-color);
  }

  .footer-copyright {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
  }

  .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;

    &.el-button--active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }

    &:hover {
      background-color: var(--primary-hover);
      transform: translateY(-3px);
    }
  }
}

// 深色主题适配
.dark-mode .app-footer {
  background: linear-gradient(135deg, #1f2127 0%, #1c1e24 100%);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
</style>